<template>
  <div class="time-line-wrapper">
    <div class="time-line-list">
      <div class="time-line-item" v-for="(item,index) in dataList" :key="index" @click="clickItem(index)">
        <div class="time-line-left">
          <span class="left-time">
            {{getDate(item.time)}}<br>
            <span style="font-size: 10px; color: rgb(153, 153, 153);">{{dateFormat("mm-dd HH:MM",item.time)}}</span>
          </span><span class="left-dot"></span><span class="left-line"></span>
        </div>
        <div class="time-line-right">
          <p class="right-title">
            <i v-if="index==0">最新</i>
            {{item.title}}
          </p>
          <p class="right-content">
            {{item.content}}
          </p>
          <p class="left-go">
            点击查看原文
          </p>
          <p class="right-form">
            信息来源：{{item.form}}
          </p>
        </div>
      </div>
    </div>
    <p class="watch-more" @click="toMore" v-if="showMore">
      查看更多<img src="../../assets/image/more.png">
    </p>
  </div>
</template>

<script>
  export default {
    props: {
      showMore: {
        type: Boolean,
        default: true
      },
      dataList: {
        type: Array,
        default: []
      }
    },
    name: "TimeLine",
    data() {
      return {}
    },
    methods: {

      getDate(dateTimeStamp) {
        var minute = 1000 * 60;
        var hour = minute * 60;
        var day = hour * 24;
        var halfamonth = day * 15;
        var month = day * 30;
        if (dateTimeStamp == undefined) {

          return false;
        } else {
          dateTimeStamp = dateTimeStamp.replace(/\-/g, "/");

          var sTime = new Date(dateTimeStamp).getTime();//把时间pretime的值转为时间戳

          var now = new Date().getTime();//获取当前时间的时间戳

          var diffValue = now - sTime;

          if (diffValue < 0) {
            console.log("结束日期不能小于开始日期！");
          }

          var monthC = diffValue / month;
          var weekC = diffValue / (7 * day);
          var dayC = diffValue / day;
          var hourC = diffValue / hour;
          var minC = diffValue / minute;

          if (monthC >= 1) {
            return parseInt(monthC) + "月前";

          }
          else if (weekC >= 1) {
            return parseInt(weekC) + "周前"
          }
          else if (dayC >= 1) {
            return parseInt(dayC) + "天前";
          }
          else if (hourC >= 1) {
            return parseInt(hourC) + "小时前";
          }
          else if (minC >= 1) {
            return parseInt(minC) + "分钟前";
          } else {
            return "刚刚";
          }
        }

      },
      dateFormat(fmt, dateStr) {
        var date = new Date(dateStr.replace(/-/g, '/'));
        let ret;
        const opt = {
          "Y+": date.getFullYear().toString(),        // 年
          "m+": (date.getMonth() + 1).toString(),     // 月
          "d+": date.getDate().toString(),            // 日
          "H+": date.getHours().toString(),           // 时
          "M+": date.getMinutes().toString(),         // 分
          "S+": date.getSeconds().toString()          // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
          ret = new RegExp("(" + k + ")").exec(fmt);
          if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
          }
          ;
        }
        ;
        return fmt;
      },
      toMore() {
        this.$router.push({path: '/yiqing/timeline'})
      },
      clickItem(index) {
        window.open(this.dataList[index].src);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .time-line-list {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    margin-top: .16rem;
    padding-right: .16rem;
    overflow: hidden;
    vertical-align: top;
    .time-line-item {
      display: flex;
      .time-line-left {
        position: relative;
        flex: none;
        width: 1rem;
        overflow: hidden;
        transform: translateY(.08rem);

        .left-time {
          position: absolute;
          right: .32rem;
          font-weight: 500;
          font-size: .12rem;
          text-align: right;
          vertical-align: top;

        }
        .left-dot {
          position: absolute;
          top: 0;
          left: .76rem;
          z-index: 2;
          display: inline-block;
          width: .12rem;
          height: .12rem;
          background: url('../../assets/image/dot.png') no-repeat;
          background-size: cover;
        }
        .left-line {
          position: absolute;
          top: .1rem;
          left: .81rem;
          display: inline-block;
          width: .02rem;
          height: 9.99rem;
          background: #ebebeb;
        }
      }
      .time-line-right {
        position: relative;
        flex-grow: 1;
        margin-bottom: .12rem;
        padding: .09rem .12rem;
        background: #fff;
        border-radius: .04rem;
        .right-title {
          font-weight: 600;
          font-size: .16rem;
          line-height: .23rem;
          text-overflow: ellipsis;
          i {
            display: inline-block;
            width: .28rem;
            height: .16rem;
            margin-right: .06rem;
            color: #fff;
            font-size: .12rem;
            font-style: normal;
            line-height: .16rem;
            text-align: center;
            background-color: #f74c31;
            border-radius: .02rem;
          }
        }
        .right-content {
          display: -webkit-box;
          margin-top: .04rem;
          overflow: hidden;
          color: #999;
          font-size: .12rem;
          line-height: .16rem;
          text-overflow: ellipsis;
          -webkit-line-clamp: 5;
        }
        .left-go{

          display: inline-block;
          left: .16rem;
          bottom: .12rem;
          margin-top: .08rem;
          color: #f43f3f;
          font-size: .12rem;
          text-align: left;
        }
        .right-form {
          position: absolute;
          display: inline-block;
          right: .16rem;
          bottom: .12rem;
          margin-top: .04rem;
          color: #999;
          font-size: .12rem;
          text-align: right;
        }

      }
    }
  }

  .watch-more {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .2rem;
    color: #4169e2;
    font-size: .14rem;
    line-height: .26rem;
    img {
      width: .12rem;
      height: .12rem;
      margin-left: .02rem;
    }
  }
</style>
